CODEWITHSUNDEEP
htmlcss
Viktors
Viktors

Reputation: 935

CSS hover block li element disappear border round

My problem is that I have block with round corners and list (ul->li) inside it and when I hover on li element my block round corners disappear. Can you tell me how to fix it.

Demo : http://jsfiddle.net/kolxoznik1/zALFL/4/

HTML

            <div id="drop">
                <ul id="menu">
                    <li><a href="#home">Test-1</a></li>
                    <li><a href="#about">Test-2</a></li>
                    <li><a href="#skills">Test-3</a></li>
                </ul>
            </div>

CSS

ul{
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#drop {
    background: #F8F8F8;
    top: 40px;
    left: 0px;
    width: 180px;
    border: 1px solid #CCC;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px; 
}
#drop li a {
    color: #333;
    display: block;
    padding: 5px 10px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-decoration: none;
}
#drop li a:hover {
    background: #333;
    color: #FFF;
}

Upvotes: 1

Views: 2093

Answers (9)

Shikez
Shikez

Reputation: 86

Fixed your problem in this fiddle

#drop li a { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; color: #333; display: block; padding: 5px 10px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; text-decoration: none; }

Upvotes: 0

r3wt
r3wt

Reputation: 4742

here you go:

http://jsfiddle.net/r3wt/zALFL/24/

#drop ul li a {
    color: #333;
    display: block;
    padding: 5px 10px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-decoration: none;
}
#drop ul li a:hover {
    background: #333;
    color: #FFF;
}
#drop ul li:last-child a {
    border-radius: 3px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
#drop ul li:first-child a {
    border-radius: 3px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

Upvotes: 0

Sami
Sami

Reputation: 1051

add this into your css

ul li a:hover {
     border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px; 
}

Upvotes: 0

arzzzen
arzzzen

Reputation: 361

Use border-radius for a elements 

#drop li:first-child a {
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}
#drop li:last-child a {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

Upvotes: 1

cubecubed
cubecubed

Reputation: 238

Just add the roundness to the hover! Change the old #drop li a:hover to

#drop li a:hover {
    background: #333;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px; 
}

No, before someone asks, I have no clue what I'm doing.

Upvotes: 0

codingrose
codingrose

Reputation: 15709

Its happening because, background of li is outside the div, hence curved border does not appear.

Write:

#drop {
    overflow:hidden;
}

Updated fiddle here.

Upvotes: 9

ocajian
ocajian

Reputation: 687

Change to 

#drop li a:hover {
background: #333;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}

Upvotes: 0

Richa
Richa

Reputation: 4270

Use last-child and first-child options: Demo

#drop li:first-child a:hover {
     border-radius: 3px 3px 0 0;
    -webkit-border-radius:3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
}
#drop li:last-child a:hover {
     border-radius:0 0 3px 3px;
    -webkit-border-radius:0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    -o-border-radius: 0 0 3px 3px;
}

Upvotes: 2

Sunil Hari
Sunil Hari

Reputation: 1776

The fix is give overflow:hidden to the div drop

The issue was when hover on the list item the corners of the list item overlaps the corner of the ul.So when you give overflow:hidden for the ul the overlap is hidden. DEMO

Upvotes: 8

Related Questions