CODEWITHSUNDEEP
javascriptiosiphonecss
Cindy Turlington
Cindy Turlington

Reputation: 2527

html dropdown select option looks so ugly on iphones

Is there any alternative to the dropdown menu implementation on iphones/ios, this is a mobile website implementation, not native app, looking for simple alternative with html/css/javascript.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scaleable=no, width=device-width" />
</head>
<body>
<font size=+1>
<select>
<option disabled selected value="select">Select a category</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</font>
</body>
</html>

Upvotes: 1

Views: 1352

Answers (1)

reza jafari
reza jafari

Reputation: 1336

<html>
<head>
/* reza jafari*/
<style>
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
</style>
</head>
<body>
<ul id="menu">
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 5</a>
    </li>
</ul>
</body>
</html>

Upvotes: 1

Related Questions