Databases
StackOverflow2013
Postsdbo
POHow to create CSS dropdown
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create CSS dropdown
    primarykey
    data
    text
    <p>I wanted to create a css dropdown for my blogger blog. But I Faced many difficulties because I am not a CSS professional and my blogger template is not designed by me. I tried many things but nothing worked for me. I am giving you the code, please identify errors in it. Thanks...</p> <p>My HTML Structure of Navigation Links:</p> <pre><code>&lt;div id='mainmenu'&gt; &lt;ul&gt; &lt;li class='first current_page_item'&gt;&lt;a expr:href='data:blog.homepageUrl' title='Home'&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='http://www.technodoze.com/search/label/Physics' title='Amazing Articles about Physics'&gt;Physics&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'&gt;Amazing Stuff&lt;/a&gt; </code></pre> <p>The code for drop down element where problem really is:</p> <pre><code> &lt;ul&gt; &lt;li&gt;&lt;a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'&gt;Amazing Stuff&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='http://www.technodoze.com/2011/09/write-for-us.html' title='Write For Us'&gt;Write For Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>From here it is normal code:</p> <pre><code>&lt;/li&gt; &lt;li&gt;&lt;a href='http://www.technodoze.com/search/label/Videos' title='Videos'&gt;Videos&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='http://www.technodoze.com/search/label/Downloads' title='Free Downloads'&gt;Download&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='http://www.technodoze.com/search/label/Biggest%20In%20The%20World' title='SG Biggest'&gt;Biggest In The World&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='http://www.technodoze.com/2010/01/author-of-blog.html' title='About Me'&gt;About Me&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>See URL where this navigation linking is applied: <a href="http://www.technodoze.com" rel="nofollow">www.technodoze.com</a></p> <p>Now my CSS:</p> <pre><code>#mainmenu a { text-decoration:none; display:block; margin:0; float:left; background: none; padding: 9px 15px; text-transform:uppercase; color: #CCCCCC; font-size: 11px; } #mainmenu li a:hover, #mainmenu li a:focus, #mainmenu a.mainMenuParentBtnFocused{ /*background-color: #1e1e1e;*/ background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666; color:#fff; } #mainmenu , #mainmenu ul { padding: 0; margin: 0; list-style: none; line-height: 1em; } #mainmenu ul { /*border around submenu goes here*/ background: none; left:0; } #mainmenu li { /*great place to use a background image as a divider*/ background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif); background-repeat:no-repeat; background-position: 100% 0px; cursor: pointer; float: left; margin: 0 0px 0 0px; padding: 0 2px 0 1px; height: 30px; display: inline; } #mainmenu { overflow: hidden; font-size: 12px; float: left; width: 738px; display: inline; height: 30px; } </code></pre> <p>All is well till here... (The Upper CSS code is Just for the #mainmenu ul li which is infact going fine.)</p> <p>The problem starts here...</p> <pre><code>#mainmenu li ul { display: none; margin:0; padding 0; position:absolute; left:0; } #mainmenu li:hover &gt; ul { display: block; float:none; position:absolute; } #mainmenu li:hover ul li { display: block; } #mainmenu li ul li { list-style-type: none; margin:0; display: block; padding:0; } </code></pre> <p>I tried to create a drop-down but the child element [ #mainmenu ul li ul ] is not in the form of drop-down and is embedded on the side. . (This is currently applied on website you can view it by going to www.technodoze.com and mouseover on Amazing Stuff navigation link.)</p> <p>I am sure the rare mistake is in the last piece of CSS code but I showed you the whole scenario in case this problem has arisen due to float of #mainmenu ul or any other upper element...</p> <p>I will be thankful to the person helping me...</p> <p>Thanks</p> <p><strong>Updated: 27 sep, 11:00 GMT, Reason: One more problem</strong></p> <p>I have changed my code now to :</p> <pre><code>#mainmenu { overflow: hidden; font-size: 12px; float: left; width: 738px; display: inline; height: 30px; } #mainmenu ul li ul li a { background-color:#333333; } #mainmenu ul li ul .first_li { -moz-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; -webkit-border-top-left-radius: 7px; border-top-left-radius: 7px; -moz-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; -webkit-border-top-right-radius: 7px; border-top-right-radius: 7px; } #mainmenu ul li ul .last_li { -moz-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; -webkit-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; -webkit-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; } #mainmenu ul li ul { -moz-box-shadow: 4px 4px 2px #888; -webkit-box-shadow: 4px 4px 2px #888; box-shadow: 4px 4px 2px #888; -khtml-box-shadow: 4px 4px 2px #888; border-color: #F1F1F1; -moz-outline-color: #F1F1F1; } #mainmenu a { text-decoration:none; display:block; } #mainmenu a { margin:0; float:left; background: none; padding: 9px 15px; text-transform:uppercase; color: #CCCCCC; font-size: 11px; } #mainmenu li a:hover, #mainmenu li a:hover ul li, #mainmenu li a:focus, #mainmenu li a:focus ul li, #mainmenu li:hover &gt; a, #mainmenu a.mainMenuParentBtnFocused{ /*background-color: #1e1e1e;*/ background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666; color:#fff; } #mainmenu , #mainmenu &gt; ul { padding: 0; margin: 0; list-style: none; line-height: 1em; } #mainmenu ul { /*border around submenu goes here*/ background: none; left:0; } #mainmenu &gt; li { /*great place to use a background image as a divider*/ background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif); background-repeat:no-repeat; background-position: 100% 0px; cursor: pointer; float: left; margin: 0 0px 0 0px; padding: 0 2px 0 1px; height: 30px; display: inline; } #mainmenu li ul { display: none; margin:0; padding 0; position:absolute; left:0; } #mainmenu li:hover &gt; ul { display: block; float:none; position:absolute; top:159px; left:235px; } #mainmenu li:hover ul li { display: block; } #mainmenu li ul li { list-style-type: none; margin:0; display: block; padding:0; } </code></pre> <p>Now the only problem left is that I am getting whitespace in the second order li having address [#mainmenu ul li ul li]</p> <p>You can see by going to this link <a href="http://www.technodoze.com" rel="nofollow">www.technodoze.com</a></p> <p>Please suggest some solution.</p> <p>Thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMuhammad Bilal Shafi
    1. USMuhammad Bilal Shafi
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to create CSS dropdown
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to create CSS dropdown
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POHow to create CSS dropdown
      1. This table or related slice is empty.
      1. VTDownMod
    1. COThis may help http://jsfiddle.net/Mutmatt/3ppr8/23/ or http://jsfiddle.net/Mutmatt/gqsmB/10/
      singulars
      1. POHow to create CSS dropdown
      1. USMutmatt
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload