Databases
StackOverflow2013
Postsdbo
POadd border line for menu li element
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POadd border line for menu li element
    text
    copied!<p>i've a menu and i would want to use border on left but here is the desired look how i wanted, i am able to add border but it will take full height of the li element and also i do not want that border to appear on sub menus</p> <p>example : aunipark.in</p> <p><img src="https://i.stack.imgur.com/7DqgC.png" alt="enter image description here"></p> <p>here is my code :</p> <p><strong>html</strong></p> <pre><code>&lt;div class="menudiv"&gt; &lt;div class="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;School&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Vision and Mission &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Principal’s desk&lt;/a&gt; &lt;li&gt;&lt;a href="#"&gt;Management&lt;/a&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Admission&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Overview&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Download application form&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;School Calander&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;News &amp; Events&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Career&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>css</strong></p> <pre><code>.menudiv { width:980px; } .menu { font-family: 'Open Sans', sans-serif; font-size:14px; } .menu ul ul { display: none; } .menu ul li:hover &gt; ul { display: block; } .menu ul { background: #111312; margin: 0; list-style: none; position: relative; padding: 0; border:3px solid #111312; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .menu ul:after { content: ""; clear: both; display: block; } .menu ul li { float: left; border-bottom: 3px solid transparent; } .menu ul li:hover { background: #111312; border-bottom: 3px solid #fff; } .menu ul li:hover a { color: #fff; } .menu ul li a { display: block; padding: 15px; border-right: 3px solid #fff; color: #fff; text-decoration: none; } .menu ul ul { background: #111312; padding: 0; position: absolute; top: 100%; } .menu ul ul li { float: none; position: relative; } .menu ul ul li a { padding: 10px; color:#000; display: block; } .menu ul ul li a:hover { background: #111312; color: #fff; } .menu ul ul ul { position: absolute; left: 100%; top:0; padding: 0; } .menu ul ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid pink; position: relative; } .menu ul ul ul li a { padding: 10px; color: #fff; display: block; } .menu ul ul ul li a:hover { background: #95CEF1; color: #000; } .menu ul ul ul ul { position: absolute; left: 100%; top:0; } .head { width:500px; height:200px; background:#789; } .foot { width:500px; height:200px; background:#123; } </code></pre> <p>and also the fiddle : jsfiddle.net/p7Nsf/9/</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