Note that there are some explanatory texts on larger screens.

plurals
  1. POsubmenus in css/html
    primarykey
    data
    text
    <p>I have got a submenu which expands from a nav menu type object when I hover over it. Right now, my main nav menu looks like so...</p> <pre><code>&lt;div id= "navbar"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href= "#" class= "navlink" id= "first"&gt; First &lt;div class= "firstsubmenu"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href= "#" class="firstsubmenulink"&gt; First sub menu option &lt;/li&gt; &lt;li&gt; &lt;a href= "#" class="firstsubmenulink"&gt; Second sub menu option &lt;/li&gt; etc... &lt;/ul&gt; &lt;/div&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href= "#" class= "navlink" id="second"&gt; Second &lt;div class= "secondsubmenu"&gt; &lt;ul&gt; ..and so on &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Right now, my css is looking like</p> <pre><code>ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } .navlink:link { display:block; width:120px; text-align:center; padding:10px; text-decoration:none; color:#FFFFFF; } .navlink:hover { background-color:#ADD8E6; color:#FFFFFF; } .navlink:visited { background-color:#ADD8E6; color:#FFFFFF; } </code></pre> <p>Before I tried making each item in the submenu a clickable link, everything showed up perfectly fine. IE: firstsubmenu showed up perfectly. It's css is </p> <pre><code>.firstsubmenu { display : none; position : absolute; left : 75px; top : 32px ; background-color : red; width : 930px; height : 25px; z-index : 10; } </code></pre> <p>But now that I added the links (made every list element within an block), firstsubmenu no longer appears. The css for each link looked something like this</p> <pre><code>.firstsubmenulink { display:block; width:120px; text-align:center; padding:10px; text-decoration:none; color:#FFFFFF; } </code></pre> <p>But as I said, the submenu no longer even appears. I realize this is a bit of a long post, but any advice would be great.</p>
    singulars
    1. This table or related slice is empty.
    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. This table or related slice is empty.
 

Querying!

 
Guidance

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