css - Twitter Bootstrap Dropdown Menu offset with strange graphic -
i have twitter bootstrap navbar , working except dropdown menus offset 40 pixels , have strange shadowed graphic left of drop down.
i've inspected figure out might be, have attempted reset radius, margin , padding no avail.
if knew was, great help.
update
thanks christian varga, strange shape indeed box-shadow , i've removed that. left left margin of looks 40 pixels wrapping whole drop down list.
i have posted html , css below
html
<body> <header> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href=@url.action("index", "home", new { area = ""}) class="navbar-brand"><img id="alogo" src="~/content/images/logos/logo.png" /></a> </div> <nav class="nav navbar-collapse collapse"> <ul class="navbar-right"> <li> <a href=@url.action("index", "controller", new { area = "areaname"})><i class="fa fa-bar-chart-o fa-2x"></i><br />top level</a> <ul> <li><a href=@url.action("index", "controller", new { area = "areaname"})>drop down 1</a></li> <li><a href=@url.action("details", "controller", new { area = "areaname" })>drop down 2</a></li> </ul> </li> </ul> </nav> </div> </div> css
/*nav bar styling*/ .nav { background-color: #3b5998; width: auto; } .navbar-inverse { background-color: #3b5998; border-color: #e7e7e7; } .nav ul; { margin: 0; padding: 0; } .nav ul li { list-style: none; display: inline-block; margin: 0; } .nav ul li { display: block; text-decoration: none; text-align: center; /*left upper right bottom*/ padding: 10px 10px 10px 10px; color: #ffffff; font-size: 14px; font-family: 'helvetica neue', helvetica, arial, sans-serif; transition: color 0.5s, background 0.5s; -webkit-transition: color 0.5s, background 0.5s; /* safari */ } .nav ul li:hover { color: #efefef; padding-bottom: 10px; background-color: #293e6a; transition: color 0.5s, background 0.5s; -webkit-transition: color 0.5s, background 0.5s; /* safari */ } /* drop down */ .nav ul li ul { display: none; } .nav ul li:hover ul { z-index: 2; position: absolute; display: block; } .nav ul li ul { position: relative; /*-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/ } .nav ul li ul:before, .nav ul li ul:after { content: ""; position: absolute; z-index: -1; /*-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8); box-shadow: 0 0 20px rgba(0,0,0,0.8);*/ top: 50%; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .nav ul li ul li { list-style: none; display: block; float: none; } .nav ul li ul li:hover { color: #293e6a; padding-bottom: 10px; background-color: #efefef; transition: color 0.5s, background 0.5s; -webkit-transition: color 0.5s, background 0.5s; /* safari */ } .nav ul li ul li { } .nav ul li ul li { padding: 5px 15px 5px 15px; text-align: left; } .nav ul li ul li { min-width: 20px; padding-right: 10px; } /* drop down arrow */ .nav li > a:after { content: ' »'; } .nav > li > a:after { content: ' »'; } .nav li > a:only-child:after { content: ''; } /* active class */ .nav ul .active { color: #fff; } .navbar-brand { padding: 0px 0px 0px 0px; margin: 15px 0px 0px 0px; } </style>
Comments
Post a Comment