Databases
StackOverflow2013
Postsdbo
POhow to add sub menus on a responsive css menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to add sub menus on a responsive css menu
    text
    copied!<p>I have this html for my css menu:</p> <pre><code>&lt;nav class="clearfix"&gt; &lt;ul class="clearix"&gt; &lt;li&gt;&lt;a href="http://www.domain.co.uk/"&gt;Homepage&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/services"&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/project-gallery"&gt;Project Gallery&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/contact-us"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;a href="#" id="pull"&gt;Menu&lt;/a&gt; &lt;/nav&gt; </code></pre> <p>&nbsp;</p> <pre><code>nav { height: 50px; width: 100%; background: #F00; font-size: 14pt; font-family: Arial; position: relative; border-bottom: 5px solid #FFFFFF; } nav ul { padding: 0; margin: 0 auto; width: 100%; height: 50px; text-align: center; } nav li { display: inline; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } nav a { color: #FFFFFF; display: inline-block; width: auto; text-align: center; text-decoration: none; line-height: 50px; } nav li a { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding-left: 10px; padding-right: 10px; } nav li:last-child a { border-right: 0; } nav a:hover, nav a:active { background-color: #000000; color:#FFFFFF; } nav a#pull { display: none; } @media screen and (max-width: 600px) { nav { height: auto; } nav ul { width: 100%; display: block; height: auto; } nav li { width: 50%; float: left; position: relative; } nav li a { border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } nav a { text-align: left; width: 100%; text-indent: 25px; } } @media only screen and (max-width : 480px) { nav { border-bottom: 0; } nav ul { display: none; height: auto; } nav a#pull { display: block; color:#FFFFFF; background-color: #F00; width: 100%; position: relative; } nav a#pull:after { content:""; background: url('nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; rightright: 15px; top: 10px; } } @media only screen and (max-width : 320px) { nav li { display: block; float: none; width: 100%; } nav li a { border-bottom: 1px solid #FFFFFF; } } </code></pre> <p>I am looking for a way to add sub menus and then second sub menus on on the first ones but still keep it as responsive as it is.</p> <p>How can I do this?</p> <p><a href="http://jsfiddle.net/EYjnG/" rel="nofollow">http://jsfiddle.net/EYjnG/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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