css - Hard to position on sub-elements in a drop down menu -

-

basically, have simple css drop down menu background images links. when hover on element has sub-element , try position on sub-element, it's hard , doesn't work. here's snippet:

css

nav { width: 710px; }  nav ul ul { display: none; }  nav ul li:hover > ul {     display: block; }  nav ul { padding-top: 20px; list-style: none; position: relative; display: inline-table; }  nav ul li {     float: left;     width: 95px;     height: 32px; }     nav ul li {         display: block;         text-indent: -9999em;     }      .element,      .element:hover { width: 95px; height: 32px; }      .home { background-image: url(img/home.png); }     .home:hover { background-image: url(img/home1.png); }   nav ul ul {     padding: 0;     position: absolute;     top: 100%; }     nav ul ul li {         padding: 0;         padding-right: 90px;         position: relative;     }         nav ul ul li {             font-family: arial, helvetica, sans-serif;             color: #fff;             font-size: 16px;             text-transform: uppercase;             text-decoration: none;         }              .sub-element, .sub-element:hover { width: 180px; height: 21px; }              .interiorni { background-image: url(img/interiorni-vrati-active.png); }             .interiorni:hover { background-image: url(img/interiorni-vrati.png); }

html

<nav>     <ul>         <li><a href="#" class="element home" alt="Начало"></a>             <ul>                 <li><a href="#" class="sub-element interiorni" alt="Интериорни Врати"></a></li>             </ul>         </li>     </ul> </nav>

what doing wrong? thoughts? thank you.

for image replacement can use technique nicolas gallagher works , used bootstrap http://nicolasgallagher.com/another-css-image-replacement-technique/.
samuel thank's jsfiddle.
said, use child selectors >, because have many parents rules, , rules repetition because of global selectors nav ul.
why use display:inline-table if use float on li after, instead of display:table-cell or display:inline-block? again every li gonna float , have 95px of width etc.

.element,  .element:hover { width: 95px; height: 32px; }

just before declared link has display:block , parent has same values. need juste leave height value, because block element take 100% of parent's width : i've updated jsfiddle here. hope it's want


Comments

Post a Comment

Popular posts from this blog

sql server - MSSQL Text and Varchar(MAX) fields shown (MEMO) in DBGrid -

-
Image
i have encountered problem in mssql & delphi xe3. text , varchar(max) fields seemed (memo) or (widememo) in tdbgrid & tdbadvgrid (tms dbgrid). in first screenshot can see table fiels, in second screentshot can see sample data in database: in screenshot, see how in dbgrid or in query results. i figured out changing field type char , varchar not max solves issue don't know why having problem. can please let me know?
Read more

qml - Is it possible to implement SystemTrayIcon functionality in Qt Quick application -

-
i writing qtquick desktop application. use both c++ (for functionality) , qml (for ui) in it. use qquickview show interface written in qml. i want application reside in system tray when minimised. i mean functionality similar example. http://qt-project.org/doc/qt-4.8/desktop-systray.html . trying implement feature not find way in qt quick application. here main.cpp code: #include <qguiapplication> #include <qqmlengine> #include <qqmlcontext> #include <qqmlfileselector> #include <qquickview> #include "myapp.h" int main(int argc, char* argv[]) { qguiapplication app(argc,argv); app.setapplicationname(qfileinfo(app.applicationfilepath()).basename()); qdir::setcurrent(qapp->applicationdirpath()); myapp myappobject; qquickview view; view.connect(view.engine(), signal(quit()), &app, slot(quit())); view.rootcontext()->setcontextproperty("myappobject", &myappobject); new qqmlfilese...
Read more

mysql - Flyway migration, Unable to obtain Jdbc connection from DataSource -

-
i trying use flyway create , manage mysql database. here code have got far. flywaymigration.java : class applys migration public class flywaymigration { public flywaymigration(databaseconfiguration configuration, flyway flyway) { flyway.setdatasource(configuration.getdatasource()); flyway.migrate(); } public static void main(string[] args) { new flywaymigration(new databaseconfiguration("database.properties"), new flyway()); } } databaseconfiguration.java : configuration class, class configure datasource applyed flyway.setdatasource method public class databaseconfiguration { private final logger logger = loggerfactory.getlogger(this.getclass()); private propertiesutil prop = null; public databaseconfiguration(string file) { prop = new propertiesutil(file); } public string getdatasourceclass() { return prop.getproperty("mysql.data.source.class"); } pu...
Read more