Note that there are some explanatory texts on larger screens.

plurals
  1. POcss styling not rendering properly, possible div issue?
    primarykey
    data
    text
    <p>I'm trying to make a horizontal menu layout in CSS. I was using the guide listed here: <a href="http://www.devinrolsen.com/pure-css-horizontal-menu/" rel="nofollow">http://www.devinrolsen.com/pure-css-horizontal-menu/</a></p> <p>I've got a css file looking like this, called navigation.css:</p> <pre><code>.navigation{ width:100%; height:30px; background-color:lightgray; } .navigation ul { margin:0px; padding:0px; } .navigation ul li { display:inline; height:30px; float:left; list-style:none; margin-left:15px; } .navigation li a { color:black; text-decoration:none; } .navigation li a:hover { color:black; text-decoration:underline; } .navigation li ul { margin:0px; padding:0px; display:none; } .navigation li:hover ul { display:block; width:160px; } .navigation li li{ list-style:none; display:block; } </code></pre> <p>and in my actual php page, I have this</p> <pre><code>&lt;div class="navigation"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#"&gt;something&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="./hello.php"&gt;Hello&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="./hello2.php"&gt;hello2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Browse database&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="./test.php"&gt;test&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="./test2.php"&gt;Test2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="./search.php"&gt;Search&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>For reasons I cannot determine, their is no drop-down menu effect. Consequently, if I change navigation to an id instead of a class by replacing .navigation with #navigation, then none of the layout affects the HTML.</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.
 

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