Databases
StackOverflow2013
Postsdbo
POrounded corner menu item in css without CSS3!
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POrounded corner menu item in css without CSS3!
    text
    copied!<p>I try to achieve the following output:</p> <p><img src="https://i.stack.imgur.com/87S8Q.png" alt="normal view"></p> <p><img src="https://i.stack.imgur.com/uGu93.png" alt="after hover this will show"></p> <p>i want to achieve this with HTML and CSS. I do not want to use CSS3(as my client do not want me to!). I try the following code:</p> <p>HTML:</p> <pre><code>&lt;div class="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;registration&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Sch's direc&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;faculty &amp;amp; staff&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Campuses&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;History&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" &gt;Mission&lt;/a&gt;&lt;img src="images/right_menu.png" /&gt;&lt;/li&gt; &lt;li style="margin:0;padding:0;"&gt;&lt;img src="images/left_menu.png" /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.menu ul{ list-style:none; } .menu li{ float:right; background:url('images/menuBGrepX.png') repeat-x ; margin-right:10px; text-transform:uppercase; } .menu a{ display:block; text-decoration:none; color:#fff; padding:5px 2px; float:left; } .menu li.selected{ background:#A07E4E; } .menu li:hover{ background:#A07E4E; color:#313131; } </code></pre> <p>As you can expect the background color of <code>li</code> is changing when some one hover over it but the left and right image which I use for give a rounded border feel, it remain same. Please help me. You can check temporary work here : <a href="http://www.examplecode.info/enam/pleasehelp/" rel="nofollow noreferrer">http://www.examplecode.info/enam/pleasehelp/</a>.Thanks in advance. </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